<!DOCTYPE html>
<html>
<head>
  <title>Backbone.Epoxy - Test Suite</title>

	<link rel="stylesheet" type="text/css" href="node_modules/mocha/mocha.css">

	<style>
	body {
		margin-bottom: 50px;
	}
	.test-view {
		border: 1px solid #ccc;
		display: inline-block;
		margin: 15px;
		padding: 15px;
		width: 200px;
	}
	.test-view p {
		margin: 5px 0;
	}
	.test-view .section {
		border-top: 1px solid #ccc;
		margin-top: 15px;
		padding-top: 10px;
	}
	.test-classes {
		color: #999;
	}
	.active {
		color: #000;
	}
	.hilite {
		color: #1ec900;
	}
	.error {
		color: #f00;
	}
	</style>
</head>
<body>

	<div id="dom-view" class="test-view">
		<strong>DOM / Attribute Mapping</strong>
		<div class="section">
			<p><label class="test-classes" data-bind="classes:{error:firstNameError,active:active}">First name:</label></p>
			<input class="test-input-first" type="text" data-bind="value:firstName,events:['keyup']">
			<p><label class="test-classes" data-bind="classes:{error:lastNameError,active:active}">Last name:</label></p>
			<input class="test-input-last" type="text" data-bind="value:lastName,events:['keyup']">
			<p class="test-css" data-bind="css:{display:errorDisplay}">Error: incomplete form.</p>
		</div>
		<div class="section">
			<span class="test-text-first" data-bind="text:firstName"></span>
			<span class="test-text-last" data-bind="text:lastName"></span>
			<p class="test-html" data-bind="html:nameDisplay"></p>
		</div>
		<div class="section">
			<p>
				<strong>
					<a class="test-attr-multi" data-bind="attr:{href:preference,title:preference}">model.active:</a>
				</strong>
				<span class="test-attr" data-bind="text:active,attr:{'data-active':active}"></span>
			</p>
			<p>
				<label>active:</label>
				<input type="checkbox" class="test-checked-boolean" data-bind="checked:active">
				<button class="test-enabled" data-bind="enabled:active">yes</button>
				<button class="test-disabled" data-bind="disabled:active">no</button>
				<p>Y/N : <input type="text" class="test-yes-no" data-bind="sayYesNo:active,events:['keyup']" style="width:15px;"></p>
			</p>
		</div>
		<div class="section">
			<p>Selected Options: <span class="test-custom-binding" data-bind="printArray:checkList"></span></p>
			<p>
				<label>a</label>: <input type="checkbox" class="check-list" value="a" data-bind="checked:checkList"> &nbsp;
				<label>b</label>: <input type="checkbox" class="check-list" value="b" data-bind="checked:checkList"> &nbsp;
				<label>c</label>: <input type="checkbox" class="check-list" value="c" data-bind="checked:checkList"> &nbsp;
			</p>
			<p class="test-view-computed" data-bind="text:checkedCount"></p>
		</div>
		<div class="section">
			<p>
				<strong>model.preference:</strong>
				<span data-bind="text:preference"></span>
			</p>
			<p>
				<label>a:</label>
				<input type="radio" class="preference" name="preference" value="a" data-bind="checked:preference"> &nbsp;
				<label>b:</label>
				<input type="radio" class="preference" name="preference" value="b" data-bind="checked:preference">
			</p>
		</div>
	</div>

	<div id="mod-view" class="test-view">
		<strong>Binding Operators</strong>
		<div class="section">
			<p class="test-toggle" data-bind="toggle:active">Toggled ON</p>
			<p class="test-mod-not" data-bind="toggle:not(active)">Toggled OFF</p>
			<p class="test-mod-all" data-bind="classes:{hilite:all(firstName,lastName)}">first AND last name.</p>
			<p class="test-mod-none" data-bind="classes:{hilite:none(firstName,lastName)}">NOT first AND last name.</p>
			<p class="test-mod-any" data-bind="classes:{hilite:any(firstName,lastName)}">first OR last name.</p>
			<p class="test-mod-length" data-bind="classes:{hilite:length(checkList)}">Checklist Length</p>
			<p class="test-mod-format" data-bind="text:format('Name: $1 $2',firstName,lastName)"></p>
			<p class="test-mod-select" data-bind="text:select(active,firstName,lastName)"></p>
		</div>
		<div class="section">
			<p><select class="test-select" data-bind="value:valOptions,options:optionsList"></select></p>
			<p><select class="test-select-collect" data-bind="value:valCollect,options:$collection"></select></p>
			<p><select class="test-select-default" data-bind="value:valDefault,options:optionsList,optionsDefault:optDefault"></select></p>
			<p><select class="test-select-empty" data-bind="value:valEmpty,options:optionsList,optionsEmpty:optEmpty"></select></p>
			<p><select class="test-select-both" data-bind="value:valBoth,options:optionsList,optionsDefault:optDefault,optionsEmpty:optEmpty"></select></p>
			<p><select class="test-select-multi" multiple="multiple" data-bind="value:valMulti,options:optionsList"></select></p>
		</div>
		<div class="section">
			<div class="test-template" data-bind="template:['firstName','lastName']">
				<script type="text/tmpl"><p>{{ firstName }} {{ lastName }}</p></script>
			</div>
		</div>
		<div class="section">
			<strong>Collection Management</strong>
			<input class="name-input" type="text" value="">
			<button class="name-add">Add</button>
			<ul class="test-collection" data-bind="collection:$collection"></ul>
		</div>
	</div>

	<script type="text/template-epoxy" id="tmpl-view-tmpl">
		<div id="tmpl-view" class="test-view">
			<strong>Template / Selector Mapping</strong>
			<p><span class="user-first"></span> <span class="user-last"></span></p>
		</div>
	</script>

	<div id="mocha"></div>
	
	<script src="node_modules/jquery/dist/jquery.js"></script>
	<script src="node_modules/mocha/mocha.js"></script>
	<script src="node_modules/chai/chai.js"></script>
	<script src="node_modules/underscore/underscore.js"></script>
	<script src="node_modules/backbone/backbone.js"></script>
	<script src="backbone.epoxy.js"></script>
	<script>
	expect = chai.expect;
  mocha.setup('bdd');
	_.templateSettings = { interpolate : /\{\{(.+?)\}\}/g };
	</script>

	<script src="test.js"></script>
	<script>mocha.run();</script>
</body>
</html>
